import { Component, ChangeDetectionStrategy, Input, HostBinding } from '@angular/core';

@Component({
  selector: 'avt-select-item',
  template: `
      <ng-content></ng-content>
      <avt-clear-icon
        [hasCircle]="false"
        strokeColor="#fff"
        (deleteItem)="onDelete()"
      ></avt-clear-icon>
  `,
  styles: [
    `
      :host {
        display: flex;
        height: 82%;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        padding: 2px 4px;
        border-radius: 12px;
        margin: 1px;
      }
    `
  ],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AvtSelectItemComponent {

  @HostBinding('style.background-color') @Input() backgroundColor = '#546e95';
  @HostBinding('style.color') @Input() color = '#fff';

  public onDelete() {
    console.log('item delete')
  }
}
